<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/public.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/index.css"type="text/css"media="all">
    <script src="https://unpkg.com/vue@next"></script>
	<script src="./js/vue.global.js"></script>
    <script src="./js/data.js"></script>
    <title>疯游精</title>
    <!--甘牧霖199010232-->
</head>
<body>
    <div class="top">
        <div class="top_left">
            <a href="">你好，欢迎来到疯游精旅游网!</a>
        </div>
        <div class="top_right">
            <a href="">我的疯游&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                微信&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;客户服务</a>
        </div>
    </div>
    <div class="head">
        <ul class="head_left">
            <a href=""><img src="images/index_03.png"></a>
        </ul>
        <div class="head_right">
            <ul>
                <li class="search"><!--搜索框-->
                        <input class="f_left" type="text" placeholder="请输入关键字"/>
                        <div class="line f_right">
                            <a><span class="search_button">
                                <div class="on"><a href="">搜索</a></div>
                            </span></a>
                        </div>
                        <div class="search_left">
                            <a href="">所有产品&nbsp;&nbsp;↓</a>
                        </div>
                </li>
                <li class="photo">
                    <a href><img src="images/index_06.png"></a>
                </li>
            </ul>
        </div>

        <!--导航-->
        <div class="nav">
            <ul class="nav1">
                <li class="nav2"><a href="">首页</a></li>
                <li class="nav3"><a href="">出境旅游</a></li>
                <li class="nav4"><a href="">国内旅游</a></li>
                <li class="nav5"><a href="">周边旅游</a></li>
                <li class="nav6"><a href="">机票</a></li>
                <li class="nav7"><a href="">客栈酒店</a></li>
                <li class="nav8"><a href="">景点门票</a></li>
                <li class="nav9"><a href="">游记攻略</a></li>
            </ul>
        </div>

    </div>

    <!--注册页面-->
    <div class="banner" id="root">
        <div class="register">
            <ul>
                <li class="name">
                    <span>用户昵称:</span>&nbsp;&nbsp;
                    <input type="text" name="name" placeholder="英文、数字长度为6-10个字符" required
                     v-model="name" @blur="check_name()">
                </li>

                <li class="username">
                    <span>用户姓名:</span>&nbsp;&nbsp;
                    <input type="text" name="username" placeholder="请输入合法姓名" required
                     v-model="username" @blur="check_username()">
                </li>

                <li class="word">
                    <span>密码:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="password"  name="word" placeholder="长度为6-16个字符" required
                     v-model="word" @blur="check_word()">
                </li>

                <li class="word_again">
                    <span>确认密码:</span>&nbsp;&nbsp;
                    <input type="password"  name="password" placeholder="长度为6-16个字符" required
                     v-model="password" @blur="check_password()">
                </li> 

                 <li class="gender" id="sex">
                    <span>性别:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" id="checkbox1" name="gender1" value="1" v-model="sex">
                    <label for="gender1">男</label>
                    <input type="radio" id="checkbox2" name="gender2" value="2" v-model="sex">
                    <label for="gender2">女</label>
                </li>     

                <li class="phone">
                    <span>手机号:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="number"  name="phone" placeholder="以13|14|15|16|17|18开头"  required
                     v-model="phone" @blur="check_phone()">
                </li> 

                <li class="address">
                    <span>地址:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <select v-model="selectsheng" @Change="select_shi()">
                        <option value="" disabled>选择省份</option>
                        <option v-for="shen in need_data" :value="shen.value">{{shen.label}}</option>
                    </select>
                    <select v-model="selectshi" @change="select_qu()">
                        <option value="" disabled>选择市</option>
                        <option v-for="shi in data_shi" :value="shi.value">{{shi.label}}</option>
                    </select>
                    <select v-model="selectqu"  >
                        <option value="" disabled>选择区县</option>
                        <option v-for="xian in data_qu" :value="xian.value">{{xian.label}}</option>
                    </select>
                </li>

                <li class="date">
                    <span>出生日期:</span>&nbsp;&nbsp;
                    <input type="date"  name="date" required
                     v-model="date"  @blur="check_date()">
                </li> 

                 <li class="id_number">
                    <span>身份证号:</span>&nbsp;&nbsp;
                    <input type="number"  name="id_number" placeholder="身份证号必须合法" required
                     v-model="id_number" @blur="check_id()">
                </li>
            </ul>
            <div class="enter">
                <a><input class="submit01" type="submit" @click="check_all()"></a>
            </div>
        </div>
        
    </div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                name:"",
                username:"",
                word:"",
                password:"",
                sex:"1",
                phone:"",
                id_number:"",
                need_data:datas,
                selectsheng:"",
                data_shi:[],
                selectshi:"",
                data_qu:[],
                selectqu:"",
            }
        },

        methods:{
            // 检验昵称合法性
            check_name(){
                if (this.name != "") {
                    if (/^[a-zA-Z0-9]{4,8}$/.test(this.name)) {
                        console.log("合法")
                    }
                    else {
                        alert("用户昵称不合法！")

                    }
                }
            },
            
            // 检验用户姓名合法性
            check_username(){
                if (this.userName == "") {
                    alert("姓名不能为空！")
                }
                else {
                    if (/^[\u4E00-\u9FA5]{2,6}$/.test(this.username)) {
                        console.log("合法")
                    }
                    else {
                        alert("姓名不合法！")
                    }
                }
            },
            // 检验密码合法性
            check_word(){
                if (this.word == "") {
                    alert("密码不能为空！")
                }
                else {
                    if (/^[a-zA-Z0-9]{6,20}$/.test(this.word)) {
                        console.log("合法")
                    }
                    else {
                        alert("密码不合法！")
                    }
                }
            },
            // 确认密码
            check_password(){
                if(this.password == this.word){
                    console.log("合法")
                }
                else{
                    alert("两次密码输入不一致！")
                }
            },
            // 验证手机号码
            check_phone(){
                if (this.phone == "") {
                    alert("电话号码不能为空！")
                }
                else {
                    if (/^1[3578]\d{9}$/.test(this.phone)) {
                        console.log("合法")
                    }
                    else {
                        alert("手机号码不合法！")
                    }
                }
            },
            // 选择省份
            select_shi() {
                this.need_data.forEach((item) => {
                    if (item.value == this.selectsheng) {
                        this.data_shi = item.children
                    }
                })
            },
            // 选择市区
            select_qu() {
                this.need_data.forEach((item) => {
                    if (item.value == this.selectsheng) {
                        item.children.forEach((item2) => {
                            if (item2.value == this.selectshi) {
                                this.data_qu = item2.children
                            }
                        })
                    }
                })
            },

            // 验证身份证号码
            check_id(){
                let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
                // 校验身份证：
                if (this.id_number != "") {
                    if (_IDRe18.test(this.id_number) || _IDre15.test(this.id_number)) {
                        console.log("合法")
                    }
                    else {
                        alert("身份证号码不合法！")
                    }
                }
            },

            //判断所有选项
            check_all(){
                if (this.name&&
                    this.username&&
                    this.word&&
                    this.password&&
                    this.id_number)
                    {
                        alert("恭喜您，注册成功！");
                    } 
                else {
                        alert("您注册失败，请按要求填写信息");
                     }
                }
            


        },

    }).mount("#root");
</script>




</html>